<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>当股东 - 中空领航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.5;
        }
        
        /* 主题颜色 */
        :root {
            --primary-color: #0B3D91; /* 深蓝色主题 */
            --secondary-color: #4A90E2; /* 天蓝色 */
            --accent-color: #FFD700; /* 金色点缀 */
            --light-color: #FFFFFF;
            --dark-color: #1A1A1A;
            --gray-color: #F0F2F5;
            --red-color: #0B3D91; /* 修改红色为主题蓝色 */
        }
        
       
        /* 主内容区 */
        .container {
            padding: 20px 15px 80px;
        }
        
        /* 头部信息 */
        .header-info {
            background-color: var(--primary-color);
            color: white;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 15px;
            position: relative;
            overflow: hidden;
        }
        
        .header-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .header-subtitle {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .header-mascot {
            position: absolute;
            right: 0px;
            bottom: 0;
            width: 160px;
            height: 100px;
        }
        
        /* 倒计时 */
        .countdown {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 8px 15px;
            border-radius: 20px;
            margin-top: 10px;
            display: inline-block;
        }
        
        /* 股东收益 */
        .dividend-card {
            background-color: #FFF8E1;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
        }
        
        .dividend-title {
            font-size: 16px;
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .dividend-amount {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        /* 广告卡片 */
        .ad-card {
            background-color: var(--secondary-color);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            color: white;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        
        .ad-content {
            flex: 1;
        }
        
        .ad-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .ad-subtitle {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .ad-image {
            width: 80px;
            height: 80px;
            margin-left: 10px;
        }
        
        /* 品牌卡片 */
        .brand-card {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .brand-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .brand-logo {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            background-color: #FFF8E1;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
        }
        
        .brand-info {
            flex: 1;
        }
        
        .brand-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .brand-status {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: var(--primary-color);
        }
        
        .brand-status .material-icons {
            font-size: 16px;
            margin-right: 5px;
        }
        
        .brand-stats {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #666;
        }
        
        .brand-stat {
            display: flex;
            flex-direction: column;
        }
        
        .stat-value {
            font-weight: bold;
            color: #333;
        }
        
        .become-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 0;
            width: 100%;
            font-size: 16px;
            font-weight: bold;
            margin-top: 15px;
            cursor: pointer;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 20%;
        }
        
        .nav-item .icon {
            font-size: 22px;
            margin-bottom: 3px;
            color: #999;
        }
        
        .nav-item .label {
            font-size: 12px;
            color: #999;
        }
        
        .nav-item.active .icon,
        .nav-item.active .label {
            color: var(--primary-color);
        }
        
        /* 中间凸起的导航项 */
        .nav-item.featured {
            transform: translateY(-10px);
        }
        
        .nav-item.featured .icon {
            background-color: var(--primary-color);
            color: white;
            width: 44px;
            height: 44px;
            border-radius: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 2px;
            font-size: 26px;
            box-shadow: 0 4px 8px rgba(11, 61, 145, 0.3);
        }
        
        .nav-item.featured .label {
            font-weight: bold;
            color: var(--primary-color);
        }
        
        /* 图标字体 (使用Material Icons) */
        @font-face {
            font-family: 'Material Icons';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
        }
        
        .material-icons {
            font-family: 'Material Icons';
            font-weight: normal;
            font-style: normal;
            font-size: 24px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
        }
    </style>
</head>
<body>
    
    <!-- 主内容区 -->
    <div class="container">
        <!-- 头部信息 -->
        <div class="header-info">
            <div class="header-title">买飞机当股东，共享天空之城</div>
            <div class="header-subtitle">已聚集179383人成为品牌股东</div>
            <div class="countdown">距离分红还有：0天00时00分</div>
            <img class="header-mascot" src="https://pan.feiwow.com/raw/files/17b90398-8f34-4509-952d-79cb8dbdff07-1749241617399.png" alt="吉祥物">
        </div>
        
        <!-- 股东收益 -->
        <div class="dividend-card">
            <div class="dividend-title">我持有的股预计可分红</div>
            <div class="dividend-amount">¥0.00000000000</div>
            <div class="ad-card">
                <div class="ad-content">
                    <div class="ad-title">看视频领取股东分红</div>
                    <div class="ad-subtitle">每日浏览重广告效(剩余10次)</div>
                </div>
                <img class="ad-image" src="https://pan.feiwow.com/raw/files/0918b246-4f79-4516-b300-dd70ddbb7834-1749241488302.jpeg" alt="视频广告">
            </div>
        </div>
        
        <!-- 全民做股东广告 -->
        <div class="ad-card">
            <div class="ad-content">
                <div class="ad-title">全民做股东</div>
                <div class="ad-subtitle">共建天空之城，共享时代财富</div>
            </div>
            <img class="ad-image" src="https://pan.feiwow.com/raw/files/9f8e76e6-3aed-41e0-bb68-ac8c995abfbe-1749241924810.png" alt="红包">
        </div>
        
        <!-- 我打造的品牌 -->
        <div class="brand-card">
            <div class="brand-header">
                <div class="brand-logo">
                    <span class="material-icons" style="font-size: 36px; color: var(--primary-color);">flight</span>
                </div>
                <div class="brand-info">
                    <div class="brand-name">ZG-ONE</div>
                    <div class="brand-status">
                        <span class="material-icons">lock</span>
                        阶段目标正在开启中
                    </div>
                </div>
            </div>
            <div class="brand-stats">
                <div class="brand-stat">
                    <span>股东：</span>
                    <span class="stat-value">3761位</span>
                </div>
                <div class="brand-stat">
                    <span>进度：</span>
                    <span class="stat-value">56%</span>
                </div>
            </div>
            <button class="become-btn">成为股东</button>
        </div>
        
        <!-- 另一个品牌 -->
        <div class="brand-card">
            <div class="brand-header">
                <div class="brand-logo">
                    <span class="material-icons" style="font-size: 36px; color: var(--secondary-color);">flight</span>
                </div>
                <div class="brand-info">
                    <div class="brand-name">千岛湖景区开发</div>
                    <div class="brand-status">
                        <span class="material-icons">lock</span>
                        阶段目标正在开启中
                    </div>
                </div>
            </div>
            <div class="brand-stats">
                <div class="brand-stat">
                    <span>股东：</span>
                    <span class="stat-value">4434位</span>
                </div>
                <div class="brand-stat">
                    <span>进度：</span>
                    <span class="stat-value">49%</span>
                </div>
            </div>
            <button class="become-btn">成为股东</button>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="index.html" class="nav-item">
            <div class="icon">
                <span class="material-icons">home</span>
            </div>
            <div class="label">首页</div>
        </a>
        <a href="airplane.html" class="nav-item active">
            <div class="icon">
                <span class="material-icons">flight</span>
            </div>
            <div class="label">当股东</div>
        </a>
        <a href="camp.html" class="nav-item featured">
            <div class="icon">
                <span class="material-icons">landscape</span>
            </div>
            <div class="label">建营地</div>
        </a>
        <a href="video.html" class="nav-item">
            <div class="icon">
                <span class="material-icons">videocam</span>
            </div>
            <div class="label">领红包</div>
        </a>
        <a href="my.html" class="nav-item">
            <div class="icon">
                <span class="material-icons">person</span>
            </div>
            <div class="label">我的</div>
        </a>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 底部导航切换
            const navItems = document.querySelectorAll('.nav-item');
            
            navItems.forEach((item) => {
                item.addEventListener('click', function() {
                    navItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 获取当前点击的导航项的标签文本
                    const label = this.querySelector('.label').textContent.trim();
                    
                    // 根据标签文本确定要跳转的页面
                    let targetPage;
                    switch(label) {
                        case '首页':
                            targetPage = 'index.html';
                            break;
                        case '当股东':
                            targetPage = 'airplane.html';
                            break;
                        case '建营地':
                            targetPage = 'camp.html';
                            break;
                        case '领红包':
                            targetPage = 'video.html';
                            break;
                        case '我的':
                            targetPage = 'my.html';
                            break;
                        default:
                            return; // 如果没有匹配的标签，不执行任何操作
                    }
                    
                    // 获取当前页面的文件名
                    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
                    
                    // 如果点击的是当前页面对应的导航项，不执行任何操作
                    if (targetPage === currentPage) {
                        return;
                    }
                    
                    // 否则跳转到对应页面
                    window.location.href = targetPage;
                });
            });
            
            // 按钮点击效果
            const buttons = document.querySelectorAll('.become-btn');
            
            buttons.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    // 获取对应的品牌名称
                    const brandCard = this.closest('.brand-card');
                    const brandName = brandCard.querySelector('.brand-name').textContent;
                    
                    this.style.opacity = '0.8';
                    setTimeout(() => {
                        this.style.opacity = '1';
                        // 跳转到产品介绍页面，并传递品牌名称
                        window.location.href = `productInfo.html?brand=${encodeURIComponent(brandName)}`;
                    }, 200);
                });
            });
            
            // brand-card点击事件
            const brandCards = document.querySelectorAll('.brand-card');
            brandCards.forEach(card => {
                card.addEventListener('click', function(e) {
                    // 如果点击的是按钮，不执行卡片的点击事件，让按钮的点击事件处理
                    if (e.target.classList.contains('become-btn') || e.target.closest('.become-btn')) {
                        return;
                    }
                    
                    // 获取品牌名称
                    const brandName = this.querySelector('.brand-name').textContent;
                    
                    // 跳转到产品介绍页面，并传递品牌名称
                    window.location.href = `productInfo.html?brand=${encodeURIComponent(brandName)}`;
                });
            });
            
            // 初始化引导系统
            setTimeout(() => {
                // 飞机购买页面引导步骤配置
                const airplaneGuideSteps = [
                    {
                        target: '.header-info',
                        title: '头部信息',
                        content: '这里展示当前活动信息和倒计时，关注这里了解最新活动。',
                        position: 'bottom'
                    },
                    {
                        target: '.dividend-card',
                        title: '股东收益',
                        content: '这里显示您作为股东的预计分红，通过观看视频可以领取分红。',
                        position: 'bottom'
                    },
                    {
                        target: '.ad-card',
                        title: '全民做股东',
                        content: '点击这里了解如何成为股东，共享财富增长。',
                        position: 'bottom'
                    },
                    {
                        target: '.brand-card:first-of-type',
                        title: '品牌信息',
                        content: '这里展示品牌详情，点击卡片可以查看更多信息。',
                        position: 'bottom'
                    },
                    {
                        target: '.become-btn',
                        title: '成为股东',
                        content: '点击这里成为该品牌的股东，参与品牌建设。',
                        position: 'top'
                    },
                    {
                        target: '.nav-item.active',
                        title: '当前页面',
                        content: '这是"当股东"页面，您可以在这里查看和管理您的投资。',
                        position: 'top'
                    }
                ];
                
                // 如果引导系统已加载，则初始化
                if (typeof guideSystem !== 'undefined') {
                    guideSystem.init('airplane', airplaneGuideSteps);
                }
            }, 1000);
        });
    </script>
    
    <!-- 引入引导系统脚本 -->
    <script src="guide.js"></script>
</body>
</html>